<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="\homemobile\lib\reset.css">
  <link rel="stylesheet" href="\homemobile\lib\all.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
  <style>
    .rad{ 
        font-size: 14px;
    }
    .rad .van-radio__icon{
        font-size: 14px;
    }
    .title2{
        padding: 16px 16px 8px;
        color: #969799;
        font-size: 14px;
        line-height: 16px;
    }
    .van-uploader__upload{
        background: #fff;
        border: 1px solid #ccc;
    }
    .view{
        width: 60px;
        height: 60px;
        border: 1px solid #ccc;
    }
    .layui-upload-img{
      width:50px;
      height:50px;
    }
    img[src=""],img:not([src]){
      opacity:0;
    }
  </style>
</head>
<body>

<div id="app">
  <div class="van-nav-bar__content"><div class="van-nav-bar__title van-ellipsis">创建欢迎语</div></div>
  <div class="pd">
    <div class="mt">
      <div v-if="wecome==='1'">
        <van-cell-group title="欢迎语1">
          <van-field
              v-model="message"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入"
              show-word-limit></van-field>
        </van-cell-group>
        <p class="title2">
          欢迎语2
        </p>
        <div class="rad">
          <van-radio-group v-model="type" direction="horizontal" >
            <van-radio name="1">无</van-radio>
            <van-radio name="2">图片</van-radio>
            <van-radio name="3">图文</van-radio>
            <van-radio name="4">小程序</van-radio>
            <!-- <van-radio name="4">表单</van-radio> -->
          </van-radio-group>
        </div>
        <div class="mt">
          <div v-if="type==='2'">
                <div class="layui-input-block">
                  <div class="layui-upload">
                    <div class="van-uploader__upload">
                      <button type="button" class="layui-btn" id="test1" onclick="uploads(); ">上传图片</button>
                    </div>
                      <input type="file" hidden id="files" />
                      <div class="layui-upload-list">
                          <img class="layui-upload-img" id="demo1s" src="{$url}" >
                          <input type="hidden" id="demo2s" name="file" value="{$url}" />
                          <p id="demoText"></p>
                      </div>
                  </div>
              </div>

          </div>
          <div v-if="type==='3'">
            <van-cell-group>
              <van-field input-align="right" v-model="link_title" label="标题" placeholder="请输入"></van-field>
        <van-field input-align="right" v-model="link_url" label="链接" placeholder="请输入"></van-field>
        <van-field input-align="right" v-model="link_desc" label="描述" placeholder="请输入"></van-field>
        &nbsp;&nbsp;&nbsp;&nbsp;封面：
            <div class="layui-input-block">
                <div class="layui-upload">
                  <div class="van-uploader__upload">
                    <button type="button" class="layui-btn" id="test1" onclick="uploads(); ">上传图片</button>
                  </div>
                    <input type="file" hidden id="files" />
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1s" src="{$url}" >
                        <input type="hidden" id="demo2s" name="file" value="{$url}" />
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            </van-cell-group>
          </div>
          <div v-if="type==='4'">
            <van-cell-group>
              <van-field input-align="right" v-model="miniprogram_name" label="小程序名称" placeholder="请输入"></van-field>
              <van-field input-align="right" v-model="miniprogram_appid" label="小程序ID" placeholder="请输入"></van-field>
              <van-field input-align="right" v-model="miniprogram_page" label="小程序路径" placeholder="请输入"></van-field>
              <van-field input-align="right" v-model="miniprogram_title" label="小程序标题" placeholder="请输入"></van-field>
        &nbsp;&nbsp;&nbsp;&nbsp;封面：
              <div class="layui-input-block">
                <div class="layui-upload">
                  <div class="van-uploader__upload">
                    <button type="button" class="layui-btn" id="test1" onclick="uploads(); ">上传图片</button>
                  </div>
                    <input type="file" hidden id="files" />
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1s" src="{$url}">
                        <input type="hidden" id="demo2s" name="file" value="{$url}" />
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            </van-cell-group>
          </div>
        </div>
      </div>
    </div>

    <div class="mt">
     <van-button size="small" type="info"onclick="check()" block>创建欢迎语</van-button>
    </div>
    <div class="mt">
      <a href="javascript:history.go(-1)"><van-button size="small" block>取消</van-button></a>
    </div>

  </div>
</div>

<script src="\homemobile\lib\vue.js"></script>
<script src="\homemobile\lib\moment.js"></script>
<script src="/layui/layui.js"></script>
<script src="/js/ajax.js"></script>
  <script src="/cdn/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<script>
var app = new Vue({
    el: '#app',
    data:{
        link_title:'',
        link_url:'',
        link_desc:'',
        miniprogram_title:'',
        miniprogram_page:'',
        miniprogram_appid:'',
        miniprogram_name:'',
        wecome:'1',
        message:'',
        type:'1'
    },
    methods:{
        afterRead:function(file){
            console.log(file)
        },
        onSearch:function(){

        },
        setUserTag:function(item){
            this.userTag = item;
            this.showTag = false;
        },
    }
});

if('{$welcomeMsg->id}'){
  app.$data.message = '{$welcomeMsg->text_content}';
  app.$data.link_title = '{$welcomeMsg->link_title}';
  app.$data.link_url = '{$welcomeMsg->link_url}';
  app.$data.link_desc = '{$welcomeMsg->link_desc}';
  app.$data.miniprogram_title = '{$welcomeMsg->miniprogram_title}';
  app.$data.miniprogram_page = '{$welcomeMsg->miniprogram_page}';
  app.$data.miniprogram_appid = '{$welcomeMsg->miniprogram_appid}';
  app.$data.miniprogram_name = '{$welcomeMsg->miniprogram_name}';
  app.$data.type = '{$welcomeMsg->other_type}';
}
function uploads() {
    $("#files").trigger("click");
    openuploads();
}
function openuploads() {
  $("#files").change(function () {
    var formdata = new FormData();
    formdata.append('file', $("#files")[0].files[0]); //获取图片信息
    // formdata.append('ordernumber'); //
    $.ajax({
        url: "falses.html",
        type: 'post',
        data: formdata,
        cache: false,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function (e) {
            if (e.status == "success") {
                var data = e.data.filePath;
                $("#demo1s").attr('src',data);
                $("#demo2s").attr('value',data);
            } else {
                alert(e.msg, '');
            }
        }
    });
});
}

 function check(){
  var text_content = app.$data.message;
  if(text_content == ""){
    tusi('欢迎语1不能为空');
    return false;
  }
  var shareType = app.$data.type;
  if(shareType == 2){
    var image = $("#demo2s").val();
    if(image == ""){
      tusi('请选择图片');
      return false;
    }
  }
  if(shareType == 3){
    var link_title = app.$data.link_title;
    var link_url = app.$data.link_url;
    var link_desc = app.$data.link_desc;
    var link_pic = $("#demo2s").val();
    if(link_title == "" && link_url=="" && link_desc==""){
      tusi("请输入完整的图文信息");
      return false;
    }
    if(link_pic == ""){
      tusi('请选择图片');
      return false;
    }
  }
  if(shareType == 4){
    var miniprogram_title = app.$data.miniprogram_title;
    var miniprogram_page = app.$data.miniprogram_page;
    var miniprogram_appid = app.$data.miniprogram_appid;
    var miniprogram_name = app.$data.miniprogram_name;
    var miniprogram_pic = $("#demo2s").val();
    if(miniprogram_name == "" && miniprogram_appid=="" && miniprogram_page=="" && miniprogram_title==""){
      tusi("请输入完整的小程序信息");
      return false;
    }
    if(miniprogram_pic == ""){
      tusi('请选择图片');
      return false;
    }

  }
  myAjaxPost(false, true, '', {
    text_content:text_content,
    shareType:shareType,
    image:image,
    link_title:link_title,
    link_url:link_url,
    link_desc:link_desc,
    link_pic:link_pic,
    miniprogram_page:miniprogram_page,
    miniprogram_title:miniprogram_title,
    miniprogram_appid:miniprogram_appid,
    miniprogram_name:miniprogram_name,
    miniprogram_pic:miniprogram_pic
  }, function (resp) {
    if(resp.status == 'success'){
      tusi(resp.msg);
       history.go(0);
    }else{
      tusi(resp.msg);
    }
  });
 }
</script>
</body>
</html>
